<template>
  <div style="margin-top:4px;vertical-align:center">
    <el-table :data="tableData"  border 
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle">
      <el-table-column  label="" width="60px">
        <!--插入图片链接的代码-->
        <template slot-scope="scope">
          <img :src="require('@/assets/trackingimg/' + scope.row.imgPath)" alt class="table_img">
        </template>
      </el-table-column>
      <el-table-column prop="rice_cooker" label="UT" min-width="57px" align="center"></el-table-column>
      <el-table-column prop="mush_tun" label="CPT" min-width="57px" align="center"></el-table-column>
      <el-table-column prop="lauter_tun" label="BBT" min-width="57px" align="center"></el-table-column>
      <el-table-column prop="wort_preheater" label="DAW" min-width="57px" align="center"></el-table-column>
      <el-table-column prop="wort_kettle" label="YEAST" min-width="57px" align="center"></el-table-column>
      <el-table-column prop="whirlpool" label="YBRT" min-width="57px" align="center"></el-table-column>
      <el-table-column prop="wort_cooler" label="BRYT" min-width="57px" align="center"></el-table-column>
    </el-table>
  </div>
</template>


<script>
export default {
    data(){
        return{
            tableData:[{
                imgPath:'dirty.png',
                rice_cooker:'1',
                mush_tun:'2',
                lauter_tun:'3',
                wort_preheater:'4',
                wort_kettle:'5',
                whirlpool:'6',
                wort_cooler:'7',
            },
            {
                imgPath:'cip.png',
                rice_cooker:'1',
                mush_tun:'2',
                lauter_tun:'3',
                wort_preheater:'4',
                wort_kettle:'5',
                whirlpool:'6',
                wort_cooler:'7',
            },{
                imgPath:'idle.png',
                rice_cooker:'1',
                mush_tun:'2',
                lauter_tun:'3',
                wort_preheater:'4',
                wort_kettle:'5',
                whirlpool:'6',
                wort_cooler:'7',
            },{
                imgPath:'running.png',
                rice_cooker:'1',
                mush_tun:'2',
                lauter_tun:'3',
                wort_preheater:'4',
                wort_kettle:'5',
                whirlpool:'6',
                wort_cooler:'7',
            },]
        }
    },
    computed:{
      headerCellStyle:function(){
        return {'height': window.innerHeight * 0.9 * 0.85 * 0.43 *0.2 + 'px',
                        'font-size':'6px',
                        'font-weight':'bold'}
      },
      cellStyle:function(){
        return {'height': window.innerHeight * 0.9 * 0.85 * 0.42 *0.2 + 'px',
                        'padding':'5px',
                        'font-size':'18px',
                        'color':'grey'}
      },
    },
};
</script>


<style scoped>
  .table_img{
    width:150%;
    margin-left:-6px;
    margin-bottom:-3px;
    height:45px
  }

</style>
